import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload, Form, Input } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, { useState,FC ,useRef} from 'react';
import { Button, Modal } from 'antd';
import Uploader from './upload';
import * as http from "@/api/product"
// import ImgCrop from 'antd-img-crop';


type Iprops={
    visible:boolean,
    onOk:()=>void,
    onCancel:()=>void,
    handleGetCategory:any
}
// ---------------------------------------------------
const Dialog:FC<Iprops>= (props:any) => {

    // 控制显示与隐藏
  const {visible,handleGetCategory}=props
  console.log(visible)

  /* ---------添加类目--------- */
const categoryFrom=useRef(null)
const onFinish:any=(values:any)=>{
  console.log('Success:', values);
}
//上传之后的图片地址
let [categoryImgurl, setCategoryImgurl] = useState("")

const handleSetCategoryImgurl=(imgUrl:any)=>{
  setCategoryImgurl(imgUrl)
        // console.log(imgUrl)
        
}
// 输入框的值
let [categoryName, setcategoryName]=useState("")
const handleChange=(value:any)=>{
  // console.log(value.target.value)
  setcategoryName(value.target.value)
}
const Addcategory=(categoryName:any,categoryImgurl:any)=>{
  http.addCategory(categoryName,categoryImgurl)
  .then(res=>{
    console.log(res)
    if(res.data.state){
      handleGetCategory()
      alert("添加成功")
    } 
  })
}

if(visible){
    return (
    <Modal title="上传类目图片和名称" open={visible} onOk={()=>{
            props.onOk(Addcategory(categoryName,categoryImgurl))
        }} onCancel={()=>{
            props.onCancel();
        }}>
            <Form
            initialValues={{
              remember: true,
            }}
            ref={categoryFrom}
            onFinish={onFinish}
            >
           <Uploader onUpload={handleSetCategoryImgurl}/>
            <Form.Item name="categoryname" label="类目名称" rules={[{ required: true }]}>
                <Input onChange={handleChange}/>
            </Form.Item>
            </Form>
      </Modal>
        
        );
}else{
    return null
}
  
};

export default Dialog;